import type { FC } from "react";
import classNames from "classnames";
import { useMemoizedFn } from "ahooks";
import { produce } from "immer";
import { Radio } from "antd";
import contentStyle from "../../index.module.scss";
import styles from "../index.module.scss";
import { batchUpdateCustomization } from "../layout";
import {
  useCustomizationStore,
  usePersonalDetailsStore,
} from "@/store/createStore";
import { photoSize } from "@/cvcomponents/common/utils";

interface IndexProps {}

const Index: FC<IndexProps> = () => {
  const { personalDetails } = usePersonalDetailsStore();
  const { customization, updateHeader, addCustomization } =
    useCustomizationStore();
  const { header } = customization;

  const options = [
    { label: "展示照片", value: true },
    { label: "隐藏照片", value: false },
  ];
  const run = (data) => {
    batchUpdateCustomization({
      updates: data,
      id: customization.id,
    });
  };
  const onChange = useMemoizedFn((key, v) => {
    const data = produce(customization.header, (draft) => {
      if (!draft.photoObj) {
        draft.photoObj = {};
      }
      draft.photoObj[key] = v;
    });
    if (customization.id) {
      run([
        {
          path: `header.photoObj.${key}`,
          value: v,
        },
      ]);
    } else if (personalDetails.id) {
      updateHeader(data);
      addCustomization(personalDetails.id);
      return;
    }
    updateHeader(data);
  });
  return (
    <div className={styles.photo}>
      <h1 className={contentStyle.subtitle} style={{ marginBottom: "10px" }}>
        照片设置
      </h1>
      <div style={{ display: "flex", alignItems: "center" }}>
        <div
          className={classNames(
            styles.photoShape,
            styles.portrait,
            header.photoObj?.shape === "portrait" ? styles.active : ""
          )}
          onClick={() => {
            onChange("shape", "portrait");
          }}
        ></div>
        <div
          className={classNames(
            styles.photoShape,
            styles.square,
            header.photoObj?.shape === "square" ? styles.active : ""
          )}
          onClick={() => {
            onChange("shape", "square");
          }}
        ></div>
        <div
          className={classNames(
            styles.photoShape,
            styles.round,
            header.photoObj?.shape === "round" ? styles.active : ""
          )}
          onClick={() => {
            onChange("shape", "round");
          }}
        ></div>
      </div>
      <div style={{ margin: "20px 0" }}>
        <h1 className={contentStyle.subtitle} style={{ marginBottom: "10px" }}>
          照片尺寸
        </h1>

        <div style={{ display: "flex", alignItems: "center" }}>
          {Object.keys(photoSize).map((item) => {
            return (
              <div
                key={item}
                className={classNames(
                  styles.size,
                  header.photoObj?.size === item ? styles.active : ""
                )}
                onClick={() => {
                  onChange("size", item);
                }}
              >
                {item}
              </div>
            );
          })}
        </div>
      </div>
      <div style={{ marginTop: "10px" }}>
        <Radio.Group
          onChange={(e) => {
            onChange("showPhoto", e.target.value);
          }}
          value={header.photoObj?.showPhoto}
          options={options}
        />
      </div>
    </div>
  );
};

export default Index;
